import React, { Component } from 'react';
import { message } from 'antd';
import {observer} from 'mobx-react';
import model from './model';
import Headers from '../../components/headers';
import './styles.less';
import type from '../../conf/fileFormattings';
import LoginModal from '../../components/loginModal';
import FileList from './fileList';
import host from '../../conf/hostConf';
import em from '../../utils/eventemitter';
import emKeys from '../../conf/eventemitterKeys';

@observer
class Index extends Component {
  componentDidMount(){
    model.init();
    em.emit(emKeys.changeTitle,['TEXT文件',...model.dirNames].join('/'));
  }
  render() {
    return (
      <div className="fileText-container">
        <Headers
          uploadParams={{
            name:model.nameSpace,
            showUploadList:false,
            data:{part:model.part,dir:`/${model.dirNames.join('/')}`},
            action:`${host}/upload`,
            directory:false, //支持上传文件夹
            multiple: true,
            withCredentials:true, //允许携带cookie
            beforeUpload:(file, fileList)=>{
              let reg = new RegExp(type.text,'ig');
              if (reg.test(file.type)){
                  return true;
              }else{
                  message.warning('文件类型错误！');
                  return false;
              }
          },
            onChange:(info)=>{
              if (info.file.error && info.file.error.status === 401) {
                  message.warning('请登录之后在进行上传！');
                  model.setLoginModalStat(true);
                  if (model.loginModal) model.loginModal.refreshRandCode();
                  return;
              }
              const status = info.file.status;
              if (status === 'done') {
                  model.initGetFileListParams();
                  model.getFileList();
                  message.success(`“${info.file.name}” 上传成功`);
              } else if (status === 'error') {
                  message.error(`“${info.file.name}” 上传失败`);
              }
          },
          }}
          newFolder={(foldName)=>{
            model.newFolder(foldName);
          }}
          onSearch={(value)=>{
            console.log(value);
          }}
        />
        <FileList {...this.props}/>
        <LoginModal
          ref={(ref)=>model.loginModal=ref}
          {...this.props}
          hidden={()=>model.setLoginModalStat(false)}
          visible={model.loginModalStat}
          onChange={(userInfo)=>{
            console.log(69,userInfo)
            if (userInfo) {
              model.getFileList();
            }
          }}
         />
      </div>
    );
  }
}

export default Index;
